import React, { useState } from "react";
import style from "./style.module.scss";
import { Slider } from "react-vant";

// 我的体征 滑块 参数类型
interface PropsType {
  url: string,  // 体征图片
  title: string,// 体征标题 
  unit?: "cm" | "kg", // 单位 (默认没有)
  min?: number,  // 最小值 (默认0)
  max?: number,  // 最大值 (默认100)
  value?: number // 初始值 (默认10)
  onChangeAfters?: (v) => void;
}

export const MyPhysicalSignsItem: React.FC<PropsType> = ({
  url,
  title,
  unit,
  min = 10,
  max = 100,
  value = 10,
  onChangeAfters
}) => {
  const [values, setValues] = useState(value);

  return (
    <div className={style.myPhysicalSigns_item}>
      <div className={style.myPhysicalIcon_box}>
        <img src={url} alt="" />
        <div>{title}</div>
      </div>
      <Slider
        button={
          <div className={style.btn_box}>
            <div className={style.btn_message}>{
              title === "年龄" ? `${values}岁` : `${values}${unit}`
            }</div>
          </div>
        }
        value={values}
        onChange={setValues}
        barHeight={'5px'}
        activeColor={'#3087ea'}
        inactiveColor={'#ddd'}
        min={min}
        max={max}
        onChangeAfter={(v) => onChangeAfters && onChangeAfters(v)}
      />
      <div className={style.myPhysical_unit}>
        <div>{unit ? `${min}${unit}` : `${min}`}</div>
        <div>{unit ? `${max}${unit}` : `${max}`}</div>
      </div>
    </div>
  );
};
